<template>
  <view class="invoice-page">
    <!-- 发票信息 -->
    <view class="invoice-card">
      <u-card title="电子发票" :border="false">
        <view class="invoice-header">
          <view class="invoice-title">
            <text class="title">电子发票</text>
            <text class="subtitle">Electronic Invoice</text>
          </view>
          <view class="invoice-status">
            <text class="status-text">已开具</text>
          </view>
        </view>
        
        <view class="invoice-content">
          <view class="invoice-row">
            <text class="label">发票号码：</text>
            <text class="value">{{ invoiceInfo.invoiceNo }}</text>
          </view>
          <view class="invoice-row">
            <text class="label">开票日期：</text>
            <text class="value">{{ invoiceInfo.invoiceDate }}</text>
          </view>
          <view class="invoice-row">
            <text class="label">购买方：</text>
            <text class="value">{{ invoiceInfo.buyerName }}</text>
          </view>
          <view class="invoice-row">
            <text class="label">纳税人识别号：</text>
            <text class="value">{{ invoiceInfo.buyerTaxNo || '--' }}</text>
          </view>
          <view class="invoice-row">
            <text class="label">地址电话：</text>
            <text class="value">{{ invoiceInfo.buyerAddress || '--' }}</text>
          </view>
          <view class="invoice-row">
            <text class="label">开户行及账号：</text>
            <text class="value">{{ invoiceInfo.buyerBank || '--' }}</text>
          </view>
        </view>
      </u-card>
    </view>

    <!-- 商品明细 -->
    <view class="goods-card">
      <u-card title="商品明细" :border="false">
        <view class="goods-table">
          <view class="table-header">
            <text class="header-item">商品名称</text>
            <text class="header-item">规格型号</text>
            <text class="header-item">单位</text>
            <text class="header-item">数量</text>
            <text class="header-item">单价</text>
            <text class="header-item">金额</text>
          </view>
          <view class="table-row">
            <text class="cell-item">{{ invoiceInfo.goodsName }}</text>
            <text class="cell-item">{{ invoiceInfo.goodsSpec || '--' }}</text>
            <text class="cell-item">{{ invoiceInfo.unit || '项' }}</text>
            <text class="cell-item">{{ invoiceInfo.quantity || '1' }}</text>
            <text class="cell-item">¥{{ invoiceInfo.unitPrice }}</text>
            <text class="cell-item">¥{{ invoiceInfo.amount }}</text>
          </view>
        </view>
      </u-card>
    </view>

    <!-- 税额信息 -->
    <view class="tax-card">
      <u-card title="税额信息" :border="false">
        <view class="tax-info">
          <view class="tax-row">
            <text class="tax-label">价税合计：</text>
            <text class="tax-amount">¥{{ invoiceInfo.totalAmount }}</text>
          </view>
          <view class="tax-row">
            <text class="tax-label">税率：</text>
            <text class="tax-value">{{ invoiceInfo.taxRate }}%</text>
          </view>
          <view class="tax-row">
            <text class="tax-label">税额：</text>
            <text class="tax-value">¥{{ invoiceInfo.taxAmount }}</text>
          </view>
          <view class="tax-row">
            <text class="tax-label">价税合计（大写）：</text>
            <text class="tax-value">{{ invoiceInfo.totalAmountInWords }}</text>
          </view>
        </view>
      </u-card>
    </view>

    <!-- 销售方信息 -->
    <view class="seller-card">
      <u-card title="销售方信息" :border="false">
        <view class="seller-info">
          <view class="seller-row">
            <text class="seller-label">销售方名称：</text>
            <text class="seller-value">{{ invoiceInfo.sellerName }}</text>
          </view>
          <view class="seller-row">
            <text class="seller-label">纳税人识别号：</text>
            <text class="seller-value">{{ invoiceInfo.sellerTaxNo }}</text>
          </view>
          <view class="seller-row">
            <text class="seller-label">地址电话：</text>
            <text class="seller-value">{{ invoiceInfo.sellerAddress }}</text>
          </view>
          <view class="seller-row">
            <text class="seller-label">开户行及账号：</text>
            <text class="seller-value">{{ invoiceInfo.sellerBank }}</text>
          </view>
        </view>
      </u-card>
    </view>

    <!-- 备注信息 -->
    <view v-if="invoiceInfo.remark" class="remark-card">
      <u-card title="备注" :border="false">
        <view class="remark-content">
          <text class="remark-text">{{ invoiceInfo.remark }}</text>
        </view>
      </u-card>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <u-button 
        type="primary" 
        text="下载发票"
        @click="downloadInvoice"
        size="large"
      ></u-button>
      <u-button 
        type="default" 
        text="分享发票"
        @click="shareInvoice"
        size="large"
      ></u-button>
      <u-button 
        type="default" 
        text="返回"
        @click="goBack"
        size="large"
      ></u-button>
    </view>
  </view>
</template>

<script setup>
/**
 * 发票页面
 * @author Wu.Liang
 * @date 2025-01-27
 * @version 2.0 - 统一支付接口集成
 */

import { ref, reactive, onMounted } from 'vue'
import { unifiedPaymentApi } from '@/api/payment'

// 发票信息
const invoiceInfo = reactive({
  invoiceNo: '',
  invoiceDate: '',
  buyerName: '',
  buyerTaxNo: '',
  buyerAddress: '',
  buyerBank: '',
  goodsName: '',
  goodsSpec: '',
  unit: '',
  quantity: '',
  unitPrice: '0.00',
  amount: '0.00',
  totalAmount: '0.00',
  taxRate: '0',
  taxAmount: '0.00',
  totalAmountInWords: '',
  sellerName: '',
  sellerTaxNo: '',
  sellerAddress: '',
  sellerBank: '',
  remark: ''
})

// 加载发票信息
const loadInvoiceInfo = async () => {
  try {
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    const options = currentPage.options
    
    if (!options.orderNo) {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      })
      return
    }
    
    // 模拟发票数据
    Object.assign(invoiceInfo, {
      invoiceNo: 'INV' + options.orderNo,
      invoiceDate: '2025-01-27',
      buyerName: '张三',
      buyerTaxNo: '110101199001011234',
      buyerAddress: '北京市朝阳区xxx小区1栋1单元101室',
      buyerBank: '中国银行北京分行 1234567890123456',
      goodsName: '物业服务费',
      goodsSpec: '2025年1月',
      unit: '月',
      quantity: '1',
      unitPrice: '1,280.00',
      amount: '1,280.00',
      totalAmount: '1,280.00',
      taxRate: '0',
      taxAmount: '0.00',
      totalAmountInWords: '壹仟贰佰捌拾元整',
      sellerName: '智慧社区物业管理有限公司',
      sellerTaxNo: '91110105MA00123456',
      sellerAddress: '北京市朝阳区xxx路123号 010-12345678',
      sellerBank: '中国工商银行北京分行 1234567890123456789',
      remark: '感谢您对智慧社区的支持！'
    })
    
  } catch (error) {
    console.error('获取发票信息失败', error)
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'none'
    })
  }
}

// 下载发票
const downloadInvoice = () => {
  uni.showLoading({
    title: '正在下载...'
  })
  
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '下载成功',
      icon: 'success'
    })
  }, 2000)
}

// 分享发票
const shareInvoice = () => {
  uni.showActionSheet({
    itemList: ['微信', 'QQ', '短信', '邮件'],
    success: (res) => {
      const shareMethods = ['微信', 'QQ', '短信', '邮件']
      uni.showToast({
        title: `已分享到${shareMethods[res.tapIndex]}`,
        icon: 'success'
      })
    }
  })
}

// 返回
const goBack = () => {
  uni.navigateBack()
}

// 页面加载
onMounted(() => {
  console.log('发票页面加载完成')
  loadInvoiceInfo()
})
</script>

<style lang="scss" scoped>
.invoice-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 16px;
}

.invoice-card {
  margin-bottom: 20px;
  
  .invoice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0f0f0;
    
    .invoice-title {
      .title {
        display: block;
        font-size: 20px;
        font-weight: bold;
        color: #333;
        margin-bottom: 4px;
      }
      
      .subtitle {
        display: block;
        font-size: 12px;
        color: #999;
      }
    }
    
    .invoice-status {
      .status-text {
        font-size: 14px;
        color: #2ed573;
        font-weight: 600;
      }
    }
  }
  
  .invoice-content {
    .invoice-row {
      display: flex;
      margin-bottom: 12px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .label {
        font-size: 14px;
        color: #666;
        min-width: 100px;
      }
      
      .value {
        font-size: 14px;
        color: #333;
        flex: 1;
      }
    }
  }
}

.goods-card {
  margin-bottom: 20px;
  
  .goods-table {
    .table-header {
      display: flex;
      background-color: #f8f9fa;
      padding: 12px 8px;
      border-radius: 8px 8px 0 0;
      
      .header-item {
        flex: 1;
        font-size: 12px;
        color: #666;
        text-align: center;
        font-weight: 600;
      }
    }
    
    .table-row {
      display: flex;
      padding: 12px 8px;
      border: 1px solid #f0f0f0;
      border-top: none;
      border-radius: 0 0 8px 8px;
      
      .cell-item {
        flex: 1;
        font-size: 12px;
        color: #333;
        text-align: center;
      }
    }
  }
}

.tax-card {
  margin-bottom: 20px;
  
  .tax-info {
    .tax-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .tax-label {
        font-size: 14px;
        color: #666;
      }
      
      .tax-value {
        font-size: 14px;
        color: #333;
      }
      
      .tax-amount {
        font-size: 16px;
        font-weight: bold;
        color: #ff4757;
      }
    }
  }
}

.seller-card {
  margin-bottom: 20px;
  
  .seller-info {
    .seller-row {
      display: flex;
      margin-bottom: 12px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .seller-label {
        font-size: 14px;
        color: #666;
        min-width: 100px;
      }
      
      .seller-value {
        font-size: 14px;
        color: #333;
        flex: 1;
      }
    }
  }
}

.remark-card {
  margin-bottom: 20px;
  
  .remark-content {
    .remark-text {
      font-size: 14px;
      color: #333;
      line-height: 1.5;
    }
  }
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;
}
</style> 